<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body>.d{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .d1>img{
            position: relative;
            left: 425px;
        }
        .d2{
            text-align: center;
            margin: 50px;
        }
        .d3  a div{
            float: left;
            border-radius: 5px;
        }
        #i1{
            width: 350px;
        }
        #i2,#i3{
            height: 300px;
        }
        .d>.d3>a>.d4>div{
            float: left;
            margin: 0 14px;
        }
        .d>.d3>a>.d5>div{
            float: left;
            margin: 40px 35px;
        }
        img{
            transition-duration: 2s;/*设置动画持续时间2秒*/
        }
        img:hover{
            transform: scale(1.2);/*缩放到1.2倍*/
        }
        .d4-img{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="d">
    <div class="d1"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_title.png" alt=""></div>
    <div class="d2">每天都有恋人,从这里甜蜜牵手</div>
    <div class="d3">
        <a href="">
        <div class="d4">
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_1.png" alt=""></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_4.png" alt=""></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_9.png" alt=""></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_7.png" alt="" id="i1"></div>
        </div>
        <div class="d5">
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_2.png" alt="" id="i2"></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_3.png" alt="" id="i3"></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_8.png" alt=""></div>
            <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_5.png" alt=""></div>
        </div>
        </a>
    </div>
</div>
</body>
</html>